<template>
  <div class="app-container">
    <wise-crud
      ref="wise-crud"
      :urls="urls"
      :fields="fields"
      :handle="handle"
      :filters="filters"
    >
      <template slot="outHandle">
        <el-col :span="3">
          <el-button
            v-permission="['superSysOpsAdmin', 'entAdmin']"
            type="primary"
            @click="handleAdd()"
            ><i class="el-icon-plus" />添加</el-button
          >
        </el-col>
      </template>
      <template v-slot:handle="slotProps" label-width="500px">
        <el-button
          type="primary"
          v-permission="['superSysOpsAdmin', 'entAdmin']"
          size="small"
          round
          @click.native.prevent="editHandle(slotProps.row)"
          >编辑
        </el-button>
        <el-button
          type="info"
          size="small"
          round
          @click.native.prevent="viewHandle(slotProps.row)"
          >查看
        </el-button>
        <el-button
          type="danger"
          v-permission="['superSysOpsAdmin', 'entAdmin']"
          size="small"
          round
          @click.native.prevent="removeHandle(slotProps.row)"
          >删除
        </el-button>
        <el-button
          type="warning"
          v-permission="['superSysOpsAdmin', 'entAdmin']"
          size="small"
          round
          @click.native.prevent="setTheme(slotProps.row)"
          >设置主题
        </el-button>
   

          <el-button  type="info" size="small" round @click.native.prevent="screenMonitor(slotProps.row)">项目管理
          </el-button>
      </template>
    </wise-crud>
    <el-dialog
      ref="drawer"
      :title="title"
      :visible.sync="drawer"
      destroy-on-close
    >
      <div v-if="drawer" class="draw-body">
        <div class="wise-form">
          <el-form
            ref="ruleForm"
            :model="object"
            :rules="rules"
            :validate-on-rule-change="false"
            label-width="130px"
            label-suffix=":"
          >
            <el-form-item label="平台企业" prop="name">
              <el-input
                v-model="object.name"
                placeholder="请输入平台企业"
                :maxlength="100"
                show-word-limit
                clearable
                autofocus
              />
            </el-form-item>
            <el-form-item label="项目编号" prop="welderNumber">
              <el-input
                v-model="object.welderNumber"
                placeholder="请输入项目编号"
                :maxlength="100"
                show-word-limit
                clearable
                autofocus
              />
            </el-form-item>
            <el-form-item label="项目地址" prop="area">
              <wise-region
                v-model="object.area"
                :obj-keys="[
                  {
                    field: 'province',
                    key: 'province',
                    value: 'key',
                  },
                  {
                    field: 'provinceName',
                    key: 'province',
                    value: 'value',
                    tableShow: true,
                  },
                  {
                    field: 'city',
                    key: 'city',
                    value: 'key',
                  },
                  {
                    field: 'cityName',
                    key: 'city',
                    value: 'value',
                    tableShow: true,
                  },
                  {
                    field: 'county',
                    key: 'area',
                    value: 'key',
                  },
                  {
                    field: 'countryName',
                    key: 'area',
                    value: 'value',
                    tableShow: true,
                  },
                  {
                    field: 'street',
                    key: 'town',
                    value: 'key',
                  },
                  {
                    field: 'streetName',
                    key: 'town',
                    value: 'value',
                    tableShow: true,
                  },
                ]"
                @on-value="setValue"
              />
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="object.address"
                placeholder="请输入详细地址"
                :maxlength="100"
                show-word-limit
                clearable
                autofocus
              />
            </el-form-item>
            <el-form-item label="经度" prop="longitude">
              <el-input-number
                v-model="object.longitude"
                placeholder="请输入经度"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
              <el-input-number
                v-model="object.latitude"
                placeholder="请输入纬度"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <el-form-item label="项目开始时间" prop="startTime">
              <wise-date
                v-model="object.startTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
            <el-form-item label="项目结束时间" prop="endTime">
              <wise-date
                v-model="object.endTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>

            <el-form-item label="工艺规程编号" prop="craftsId">
              <el-select
                v-model="object.craftsId"
                filterable
                clearable
                placeholder="请选择工艺规程编号"
              >
                <el-option
                  v-for="item in craftsInfoList"
                  :key="item.id"
                  :label="item.craftsNumber"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <!--<el-form-item label="项目经理" prop="userId">
              <el-select v-model="object.userId" filterable clearable placeholder="请选择项目经理">
                <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.userId" />
              </el-select>
            </el-form-item>-->

            <el-form-item label="动火等级" prop="hotLevel">
              <el-input
                v-model="object.hotLevel"
                placeholder="请输入动火等级"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <el-form-item label="动火作业单位" prop="hotEntName">
              <el-input
                v-model="object.hotEntName"
                placeholder="请输入动火作业单位"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <el-form-item label="生产计划" prop="repairMethod">
              <el-input
                v-model="object.repairMethod"
                placeholder="请输入生产计划"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <el-form-item label="焊口总数量" prop="weldAllNumber">
              <el-input-number
                v-model="object.weldAllNumber"
                placeholder="请输入焊口总数量"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <el-form-item label="焊口完成数量" prop="weldFinshNumber">
              <el-input-number
                v-model="object.weldFinshNumber"
                placeholder="请输入焊口完成数量"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <el-form-item label="纵焊缝总数量" prop="portraitWeldAllNumber">
              <el-input-number
                v-model="object.portraitWeldAllNumber"
                placeholder="请输入焊口完成数量"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <el-form-item label="纵焊缝完成数量" prop="portraitWeldFinshNumber">
              <el-input-number
                v-model="object.portraitWeldFinshNumber"
                placeholder="请输入焊口完成数量"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <el-form-item label="环焊缝总数量" prop="cinctureWeldAllNumber">
              <el-input-number
                v-model="object.cinctureWeldAllNumber"
                placeholder="请输入焊口完成数量"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <el-form-item label="环焊缝完成数量" prop="cinctureWeldFinshNumber">
              <el-input-number
                v-model="object.cinctureWeldFinshNumber"
                placeholder="请输入焊口完成数量"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>

            <!-- <el-form-item label="大屏名称" prop="screenName">
              <el-input
                v-model="object.screenName"
                placeholder="请输入大屏名称"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item> -->

            <el-form-item label="大屏名称" prop="screenName">
              <el-input
                v-model="object.screenName"
                placeholder="请输入大屏名称"
                :maxlength="100"
                show-word-limitclearable
                autofocus
              />
            </el-form-item>
            <el-form-item label="大屏Logo" prop="logo">
              <wise-file
                v-model="object.logo"
                upload-type="image"
                :limit="1"
                :max-file-size="100 * 1024 * 1024"
              />
            </el-form-item>
            <el-form-item label="施工方案" prop="construction">
              <wise-file
                v-model="object.construction"
                upload-type="file"
                :limit="1"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      ref="drawer1"
      title="查看项目"
      :visible.sync="drawer1"
      destroy-on-close
    >
      <div v-if="drawer1" class="draw-body">
        <div class="wise-form">
          <el-form
            :validate-on-rule-change="false"
            label-width="130px"
            label-suffix=":"
          >
            <el-form-item label="项目名称" prop="name">
              {{ object.name }}
            </el-form-item>
            <el-form-item label="项目编号" prop="welderNumber">
              {{ object.welderNumber }}
            </el-form-item>
            <el-form-item label="项目地址" prop="area">
              {{ object.provinceName }}{{ object.cityName
              }}{{ object.countryName }}{{ object.streetName }}
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              {{ object.address }}
            </el-form-item>
            <el-form-item label="经度" prop="longitude">
              {{ object.longitude }}
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
              {{ object.latitude }}
            </el-form-item>
            <el-form-item label="项目开始时间" prop="startTime">
              {{ object.startTime | dateFormat("YYYY-MM-DD HH:mm:ss") }}
            </el-form-item>
            <el-form-item label="项目结束时间" prop="endTime">
              {{ object.endTime | dateFormat("YYYY-MM-DD HH:mm:ss") }}
            </el-form-item>
            <!--<el-form-item label="项目经理" prop="userName">
              {{ object.userName }}
            </el-form-item>-->
            <el-form-item label="动火等级" prop="hotLevel">
              {{ object.hotLevel }}
            </el-form-item>
            <el-form-item label="动火作业单位" prop="hotEntName">
              {{ object.hotEntName }}
            </el-form-item>
            <el-form-item label="生产计划" prop="repairMethod">
              {{ object.repairMethod }}
            </el-form-item>
            <el-form-item label="大屏名称" prop="screenName">
              {{ object.screenName }}
            </el-form-item>
            <el-form-item label="焊口总数量" prop="weldAllNumber">
              {{ object.weldAllNumber }}
            </el-form-item>
            <el-form-item label="焊口完成数量" prop="weldFinshNumber">
              {{ object.weldFinshNumber }}
            </el-form-item>
            <el-form-item label="纵焊缝总数量" prop="portraitWeldAllNumber">
              {{ object.portraitWeldAllNumber }}
            </el-form-item>
            <el-form-item label="纵焊缝完成数量" prop="portraitWeldFinshNumber">
              {{ object.portraitWeldFinshNumber }}
            </el-form-item>
            <el-form-item label="环焊缝总数量" prop="cinctureWeldAllNumber">
              {{ object.cinctureWeldAllNumber }}
            </el-form-item>
            <el-form-item label="环焊缝完成数量" prop="cinctureWeldFinshNumber">
              {{ object.cinctureWeldFinshNumber }}
            </el-form-item>
            <el-form-item label="大屏Logo" prop="logo">
              <template v-if="object.logo">
                <el-image
                  :src="object.logo | imgPath"
                  fit="contain"
                  style="width: 200px"
                >
                  <div slot="error" class="image-slot">
                    <img src="~@/assets/img/defaultimg.png" />
                  </div>
                </el-image>
              </template>
            </el-form-item>
            <el-form-item
              v-if="object.construction && object.construction.length > 0"
              label="施工方案"
              prop="file"
            >
              <file-type :files="object.construction" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <!-- 主题弹层 -->
    <el-dialog title="设置主题" :visible.sync="dialogVtheme" width="30%">
      <el-form ref="form" :model="themeObj" label-width="80px">
        <el-form-item label="设置主题">
          <el-select v-model="themeObj.code" clearable placeholder="请选择主题">
            <el-option label="绿松石蓝(默认)" value="default" />
            <el-option label="粉绿主题" value="theme2" />
            <el-option label="天蓝主题" value="theme3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="setThemeHandle">确定</el-button>
          <el-button @click="dialogVtheme = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import WiseCrud from "@/components/Crud/wiseCrud";
import { postHandle } from "@/api";
import WiseFile from "@/components/Crud/components/wiseFile";
import WiseRegion from "@/components/Crud/components/wiseRegion";
import WiseDate from "@/components/Crud/components/wiseDate";
import FileType from "@/components/Crud/components/fileType";
import { setSpaceId } from "../../../../utils/auth";
export default {
  name: "ProviderManage",
  components: { FileType, WiseCrud, WiseRegion, WiseDate, WiseFile },
  data() {
    return {
      dqsj:new Date().getTime(),
      form: {
        region: "",
      },
      subView: false,
      craftsId: null,
      dialogVtheme: false,
      urls: {
        list: '/api/v1/welder-sbtx-second/project-info-comb/list',
        add: '/api/v1/welder-sbtx-second/project-info-comb/createKs',
        show: '/api/v1/welder-sbtx-second/project-info-comb/show/',
        update: '/api/v1/welder-sbtx-second/project-info-comb/updateKs',
     },
      handle: ["filters"],
      fields: [
        { label: "序号", type: "index", use: ["table"] },
        /* {
          label: '项目名称',
          prop: 'nameObj',
          type: 'select',
          filterable: true,
          url: '/api/v1/welder-sbtx-second/project-info',
          labelKey: 'name',
          valueKey: 'name',
          objKeys: [
            {
              field: 'name',
              key: 'name'
            }
          ],
          placeholder: '请输入项目名称',
          use: ['filters']
        },
        {
          label: '项目编号',
          prop: 'projectInfo',
          type: 'select',
          filterable: true,
          url: '/api/v1/welder-sbtx-second/project-info',
          labelKey: 'welderNumber',
          valueKey: 'id',
          objKeys: [
            {
              field: 'welderNumber',
              key: 'welderNumber'
            }
          ],
          placeholder: '请输入项目编号',
          use: ['filters']
        },*/
        {
          label: "大屏名称",
          prop: "screenName",
          type: "text",
          maxlength: 20,
          use: ["table"],
        },
        {
          label: "项目编号",
          prop: "welderNumber",
          type: "text",
          maxlength: 20,
          use: ["table"],
        },
        {
          label: "项目地址",
          prop: "area",
          type: "area",
          objKeys: [
            {
              field: "province",
              key: "province",
              value: "key",
            },
            {
              field: "provinceName",
              key: "province",
              value: "value",
              tableShow: true,
            },
            {
              field: "city",
              key: "city",
              value: "key",
            },
            {
              field: "cityName",
              key: "city",
              value: "value",
              tableShow: true,
            },
            {
              field: "county",
              key: "area",
              value: "key",
            },
            {
              field: "countryName",
              key: "area",
              value: "value",
              tableShow: true,
            },
            {
              field: "street",
              key: "town",
              value: "key",
            },
            {
              field: "streetName",
              key: "town",
              value: "value",
              tableShow: true,
            },
          ],
          use: ["table"],
        },
        {
          label: "详细地址",
          prop: "address",
          type: "text",
          maxlength: 200,
          use: ["table"],
        },
        {
          label: "项目开始时间",
          prop: "startTime",
          type: "date",
          format: "YYYY-MM-DD HH:mm:ss",
          use: ["table"],
        },
        {
          label: "项目结束时间",
          prop: "endTime",
          type: "date",
          format: "YYYY-MM-DD HH:mm:ss",
          use: ["table"],
        },
        {
          label: "动火等级",
          prop: "hotLevel",
          type: "text",
          maxlength: 20,
          use: ["table"],
        },
        {
          label: "操作",
          type: "handle",
          use: ["table"],
          handle: [],
          tableWidth: 350,
        },
      ],
      drawer: false,
      drawer1: false,
      drawer2: false,
      drawer3: false,
      title: "添加项目",
      typeList: [],
      craftsInfoList: [],
      userList: [],
      object: {
        name: null,
        screenName: null,
        logo: null,
        serialNum: null,
        province: null,
        city: null,
        county: null,
        street: null,
        provinceName: null,
        cityName: null,
        countryName: null,
        streetName: null,
        address: null,
        longitude: null,
        latitude: null,
        companyName: null,
        manager: null,
        typeCode: null,
        phone: null,
        file: [],
        remark: null,
        craftsId: null,
        welderNumber: null,
        userId: null,
        startTime: "",
        endTime: "",
        hotLevel: null,
        hotEntName: null,
        repairMethod: null,
        weldAllNumber: null,
        weldFinshNumber: null,
        portraitWeldAllNumber: null,
        portraitWeldFinshNumber: null,
        cinctureWeldAllNumber: null,
        cinctureWeldFinshNumber: null,
        construction: null,
      },
      rules: {
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        welderNumber: [
          { required: true, message: "请输入项目编号", trigger: "blur" },
        ],
        // area: [
        //   { required: true, message: '请选择地址', trigger: 'blur' }
        // ],
        // address: [
        //   { required: true, message: '请输入详细地址', trigger: 'blur' }
        // ],
        startTime: [
          { required: true, message: "请选择项目开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择项目结束时间", trigger: "blur" },
        ],
        hotLevel: [
          { required: true, message: "请输入动火等级", trigger: "blur" },
        ],
        hotEntName: [
          { required: true, message: "请输入动火作业单位", trigger: "blur" },
        ],
        repairMethod: [
          { required: true, message: "请输入生产计划", trigger: "blur" },
        ],
      },
      fileList: [],
      themeObj: {
        id: null,
        code: "default",
      },
    };
  },
  computed: {
    spaceId() {
      return this.$store.getters.entSpaceId;
    },

    filters() {
      if (this.$store.state.user.project) {
        return [
          {
            field: "id",
            operator: "EQUALS",
            value: this.$store.state.user.project.id,
          },
        ];
      } else {
        return [];
      }
    },
  },
  mounted() {
    window.location.reload(true);
    
  },
  methods: {
    handleAdd() {
      this.title = "添加项目";
      this.fileList = [];
      this.object = {
        name: null,
        screenName: null,
        logo: null,
        serialNum: null,
        area: null,
        provinceCode: null,
        cityCode: null,
        countyCode: null,
        streetCode: null,
        provinceName: null,
        cityName: null,
        countyName: null,
        streetName: null,
        address: null,
        longitude: null,
        latitude: null,
        companyName: null,
        manager: null,
        typeCode: null,
        phone: null,
        file: [],
        remark: null,
        craftsId: null,
        welderNumber: null,
        userId: null,
        startTime: "",
        endTime: "",
        hotLevel: null,
        hotEntName: null,
        repairMethod: null,
        weldAllNumber: null,
        weldFinshNumber: null,
        portraitWeldAllNumber: null,
        portraitWeldFinshNumber: null,
        cinctureWeldAllNumber: null,
        cinctureWeldFinshNumber: null,
        construction: null,
      };
      this.drawer = true;
      this.getCraftsInfoList();
      // this.getUserListList()
    },
    editHandle(row) {
      this.title='编辑项目';

const req = {
  d: {
    filters: [
      {
        field: 'id',
        operator: 'EQUALS',
        value: row.id,
      },
      {
        field: 'st',
        operator: 'NE',
        value: 9,
      },
    ],
    page: {
      p: 1,
      ps: 9999,
    },
  },
};

postHandle('/api/v1/welder-sbtx-second/project-info-comb/toUpdate', req).then(
  (response) => {
    const data = response.result;
    this.object= data;
  }
);
      // this.fileList = [];
      // this.getObjectById(row.id);
      // this.getCraftsInfoList();
      // this.getUserListList()
      this.drawer = true;
    },
    viewHandle(row) {
      this.getObjectById(row.id);
      this.drawer1 = true;
    },
    removeHandle(row) {
      this.$confirm("您确定要删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeById(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getObjectById(id) {
      this.fileList = [];
      postHandle(this.urls.show + id, {}).then((response) => {
        console.log(response);
        this.object = response.result;
        this.object.area = {
          province: {
            key: this.object.province,
            value: this.object.provinceName,
          },
          city: {
            key: this.object.city,
            value: this.object.cityName,
          },
          area: {
            key: this.object.county,
            value: this.object.countyName,
          },
          town: {
            key: this.object.street,
            value: this.object.streetName,
          },
        };
      });
    },
    removeById(id) {
      postHandle(
        "/api/v1/welder-sbtx-second/project-info-comb/remove-project/" + id,
        {}
      )
        .then((response) => {
          this.$message("删除成功");
          this.dialogVtheme = false;
          this.$refs["wise-crud"].handleSearch(1);
        })
        .catch((error) => {
          this.loading = false;
          const data = error.response.data;
          for (const key in data) {
            this.$message.error(this.$t(data[key]));
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.object['spaceId'] = this.spaceId
          let url;
          if (this.object.id) {
            url = this.urls.update ;
          } else {
            url = this.urls.add;
          }
          postHandle(url, {
            obj: this.object,
          })
            .then((response) => {
              this.$message("操作成功");
              this.drawer = false;
              if (this.object.id) {
                this.$refs["wise-crud"].handleSearch(0);
              } else {
                this.$refs["wise-crud"].handleSearch(1);
              }
              // this.$refs['wise-crud'].handleSearch()
              // this.$refs['drawer'].closeDrawer()
            })
            .catch((error) => {
              const data = error.response.data;
              for (const key in data) {
                this.$message.error(this.$t(key + "." + data[key]));
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    setValue(objVal) {
      if (objVal && objVal.length > 0) {
        objVal.forEach((item) => {
          this.$set(this.object, item.field, item.value);
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getCraftsInfoList() {
      const req = {
        d: {
          page: {
            p: 1,
            ps: 9999,
          },
        },
      };
      postHandle("/api/v1/welder-sbtx-second/crafts-info-comb/list", req).then(
        (response) => {
          const data = response.result;
          this.craftsInfoList = data;
        }
      );
    },
    /* getUserListList() {
      const req = {
        d: {
          page: {
            p: 1,
            ps: 9999
          }
        }
      }
      postHandle('/api/v1/welder-uac-second/user-information', req).then(response => {
        const data = response.result
        this.userList = data
      })
    },*/
    screenMonitor(row) {
    
         
          setSpaceId(row.spaceId)
          window.location.href = '/project'
       
      // this.$router.push({
      //   name: 'ProjectScreen',
      //   query: {
      //     id: row.id
      //   }
      // })
      // let routeUrl = this.$router.resolve({
      //   name: 'ProjectScreen',
      //   query: {
      //     id: row.id
      //   }
      // })
      // window.open(routeUrl.href, '_blank')
    },
    setTheme(row) {
      this.themeObj.id = row.id;
      this.themeObj.code = row.code ? row.code : "default";
      this.dialogVtheme = true;
    },
    setThemeHandle() {
      postHandle(
        `/api/v1/welder-sbtx-second/project-info-comb/update-project-code/${this.themeObj.id}`,
        {
          d: {},
          obj: this.themeObj,
        }
      )
        .then((response) => {
          this.$message("操作成功");
          this.dialogVtheme = false;
          this.$refs["wise-crud"].handleSearch(1);
        })
        .catch((error) => {
          const data = error.response.data;
          for (const key in data) {
            this.$message.error(this.$t(key + "." + data[key]));
          }
        });
    },
  },
};
</script>

<style>
.select-add .el-form-item {
  margin-bottom: 18px;
}
</style>